<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>生命周期钩子函数——在vue实例的各个阶段，会自动执行的一些函数</h1>
    <input type="text" v-model="msg">
    <p>{{msg}}</p>
    <p>{{1+1}}</p>
    <p>{{msg?'a':'b'}}</p>
    <hr>
    <p>vue的数据更新</p>
    <p>1.数组变异</p>
    <p>1.1 通过下标直接替换数组的一整项</p>
    <p>1.2 修改数组的长度时</p>
    <button v-for="num in arr1">{{num.num}}</button>
    <br>
    <button @click="add">加一项</button>
    <button @click="change">换一项</button>
    <button @click="del">删一半</button>
    <hr>
    <p>2.对象变异</p>
    <p>2.1 新增对象属性</p>
    <p>2.2 删除对象属性</p>
    <span v-for="(val,key) in obj1">{{key}}:{{val}}<br></span>
    <button @click="old">修改年龄</button>
    <button @click="addAttr">新增属性</button>
    <button @click="delAttr">删除属性</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello',
        arr1: [
          {num:1},
          {num:2},
          {num:3},
          {num:4}
        ],
        obj1: {
          name: '马保国',
          age: '69',
          job: '掌门'
        }
      },
      methods: {
        show() {
          console.log(123456,this.msg);
        },
        add() {
          this.arr1.push({num:5})
        },
        change() {
          // 可以这样写：
          // this.arr1[3].num = 3.5
          // 第一种方案：this.arr1.splice(3,1,{num:3.5})
          // 第二种方案Vue.set  或者 this.$set
          Vue.set(this.arr1, 3, {num: 3.5})
        },
        del() {
          // this.arr1.length = 2;
          // 修改数组长度正确的方式：
          this.arr1.splice(2)
        },
        old() {
          this.obj1.age = 70
        },
        addAttr() {
          // 新增属性
          // this.obj1.power = 100
          this.$set(this.obj1, 'power', 100)
        },
        delAttr() {
          // delete this.obj1.job
          this.$delete(this.obj1,'job');
        }
      },
      beforeCreate() {
        console.log('1,beforeCreate');
        console.log(this.$el);
        console.log(this.msg);
        console.log('=====================');
      },
      created() {
        console.log('2,created');
        console.log(this.$el);
        console.log(this.msg);
        this.show();
        console.log('=====================');
      },
      beforeMount() {
        console.log('3,beforeMount');
        console.log(this.$el);
        console.log(this.msg);
        console.log('=====================');
      },
      mounted() {
        console.log('4,mounted');
        console.log(this.$el);
        console.log(this.msg);
        console.log('=====================');
      },
      beforeUpdate() {
        console.log('5,beforeUpdate');
        console.log(this.$el);
        console.log(this.msg);
        console.log('=====================');
      },
      updated() {
        console.log('6,updated');
        console.log(this.$el);
        console.log(this.msg);
        console.log('=====================');
      },
      beforeDestroy() {
        console.log('7,beforeDestroy');
        console.log(this.$el);
        console.log(this.msg);
        console.log('=====================');
      },
      destroyed() {
        console.log('8,destroyed');
        console.log(this.$el);
        console.log(this.msg);
        console.log('=====================');
      },
    })
  </script>
</body>
</html>